<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <link rel="icon" href="./images/A-Cao.ico" type="image/x-icon" />
    <title>ASOUL FAN</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="属于一个魂的社区捏。" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body data-spy="scroll" data-target="#ftco-navbar" data-offset="200">
    <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
        <div class="container">
            <svg class="d-lg-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 861.96 187.54" style="width: 25vw; height: 8vh">
                <defs>
                    <style>
                        .cls-1 {
                            fill: gray;
                        }
                    </style>
                </defs>
                <g id="图层_2" data-name="图层 2">
                    <g id="图层_1-2" data-name="图层 1">
                        <path class="cls-1"
                            d="M553.91,89.22H517.8V130c0,2.29,0,10.88-.83,13.07-2.4,6-8,9.93-15,8.24A13.57,13.57,0,0,1,491.15,138c-.13-14.69,0-48.83,0-48.83l-35.7,0s0,34.48.08,49.49a49.1,49.1,0,0,0,44.76,48.51c25.52,2.15,53.1-15.52,53.59-41.08C554,141,553.91,89.22,553.91,89.22Z" />
                        <path class="cls-1"
                            d="M397.51,89.3a48.74,48.74,0,0,0-48.57,49.51c.18,26.52,22.36,48.42,48.91,48.31a48.91,48.91,0,1,0-.34-97.82Zm.65,62.08a13.35,13.35,0,0,1-13.74-13,13.71,13.71,0,0,1,13.25-13.63A13.28,13.28,0,0,1,411,138.13,13,13,0,0,1,398.16,151.38Zm23.42-12.8c-3-.07-2.15-2.71-2.24-4.52A15.9,15.9,0,0,0,414,122.42c-1.42-1.25-2.81-2.67-1.08-4.48s3.26-.36,4.6.85a20.65,20.65,0,0,1,6.91,14.69C424.28,136,424.69,138.66,421.58,138.58Zm14,6c-3.31-.26-1.94-3.48-2.08-5.59,0-.49,0-1,0-1.47-.14-11.08-4.56-20.15-12.84-27.44-1.46-1.29-4.24-2.42-2-5s3.95,0,5.38,1.19c10,8.63,14.82,19.63,14.57,32.79C438.53,141.27,439.3,144.89,435.58,144.6Z" />
                        <rect class="cls-1" x="643.22" y="27.25" width="0.37" height="0.03" />
                        <path class="cls-1" d="M643.22,27.25v0h.37v0Z" />
                        <polygon class="cls-1"
                            points="592.79 132.22 592.79 187.52 562.48 187.52 562.48 187.19 592.72 187.19 592.72 132.22 592.79 132.22" />
                        <path class="cls-1"
                            d="M285.27,27.71c-23.91.71-39.93,14.65-43.42,38.32-3.43,23.26,6,43.93,29.74,51.92,6.33,2.12,12.59,4.46,18.91,6.61,3.92,1.34,7.55,3.1,10.38,6.2,6.09,6.67,3.89,16.33-4.51,19.66a25.43,25.43,0,0,1-9.59,1.65c-16.15,0-54.4,0-54.4,0L232.59,0H189L0,187.19H54L196.85,42V152.07L104,151.89l6,35.3s123.79.35,184,0c23.51-.14,41.76-15.8,45.64-38.82,3.79-22.4-2.92-43.19-28.55-52.27-6.91-2.44-13.93-4.56-20.92-6.76a20.13,20.13,0,0,1-7.79-3.92c-4.28-3.85-5.85-8.66-4.31-14.15s5.78-8.53,11.29-9c3.23-.27,270.3,0,273,0h0V187.19h30.29v-55h.07l50.36-.08,5.14-30.2-55.5.09V62.27H662.6l.13,95.09v30.17c49.93,0,104.7-.13,104.7-.13l5.13-30.2-79.43.16V63.2L815.34,187.41H862V27.26H831.38V157.54L699.84,27.26Z" />
                    </g>
                </g>
            </svg>
            <a class="navbar-brand d-none d-lg-block" href="index.html">ASOUL FAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span>菜单</span>
            </button>
            <div class="collapse navbar-collapse" id="ftco-nav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active"><a href="#MainPage" class="nav-link">主页</a></li>
                    <li class="nav-item"><a href="#GroupIntro" class="nav-link">团体介绍</a></li>
                    <li class="nav-item"><a href="#MemberIntro" class="nav-link">成员介绍</a></li>
                    <li class="nav-item"><a href="#section-pricing" class="nav-link">新人指南</a></li>
                    <li class="nav-item"><a href="#section-about" class="nav-link">关于我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- END nav -->

    <section class="ftco-cover ftco-slant ftco-slant-white" id="MainPage">
        <div class="Backgroundimage" loop=infinite>
            <div class="about-item">
                <div class="mohu"></div>
                <img src="./images/logo描边.png" alt="">
                <span>
                    属于一个魂的社区捏
                </span>
            </div>
    </section>



    <section class="ftco-section ftco-slant patr1 part1-mobile" id="GroupIntro">
        <div class="part-introduce">
            <div class="decorate">◤ <br>◤</div>
            <p>A-SOUL是小姐姐们用动捕技术展现出3D的虚拟形象与观众互动，是首个由国内娱乐公司运营的虚拟偶像企业。团队有五位性格、特长、魅力各异的女孩组成。</p>

            <div class="decorate2">◢</div>
        </div>
        <div class="part1-mobile-introduce">
            <div class="introduce-wrapper">
                <img src="./images/part1_bg_2.png" class="part1-bg-3">
                <div class="mobile-decorate">◤ <br>◤</div>
                <p>A-SOUL是小姐姐们用动捕技术展现出3D的虚拟形象与观众互动，是首个由国内娱乐公司运营的虚拟偶像企业。团队有五位性格、特长、魅力各异的女孩组成。</p>
                <div class="mobile-decorate mobile-decorate-2">◢</div>
            </div>
        </div>
        <div class="patr1-img">
            <div class="patr1-img-wrapper">
                <!-- <img src="./images/part1.png"> -->
                <img src="./images/part1_bg_1.png" class="part1-bg-1">
                <img src="./images/part1_bg_2.png" class="part1-bg-2">
                <img src="./images/part1_bg_3.png" class="part1-bg-3">
                <img src="./images/part1_bg_4.png" class="part1-bg-4">
                <img src="./images/part1_bg_5.png" class="part1-bg-5">
            </div>
        </div>
    </section>

    <section class="ftco-section ftco-slant" id="MemberIntro" style="background-color:#282828">
        <div id="pt2">
            <div id="p2MainFlexWrapper" class="p2MainFlexWrapperNormal">
                <div class="p2ImgWrapper12">
                    <div class="p2_introduce">
                        <div class="p2_intro" style="background-color: #9AC8E2;">
                            向晚(AVA):乐华娱乐旗下虚拟偶像女团A-SOUL成员，组合游戏担当。</div>
                        <div class="p2_imgwrapper1 p2_imgwrapper">
                            <div class="p2_inner_text">向</br>晚</br>A</br>V</br>A</div>
                            <img class="p2_img" src="images/1.png" alt="向晚AvA">
                        </div>
                    </div>
                    <div class="p2_introduce">
                        <div class="p2_intro" style="background-color: #DB7D74;">
                            贝拉(Bella):乐华娱乐旗下虚拟偶像女团A-SOUL成员，组合队长兼舞蹈担当。</div>
                        <div class="p2_imgwrapper2 p2_imgwrapper">
                            <div class="p2_inner_text">贝</br>拉</br>A</br>V</br>A</div>
                            <img class="p2_img" src="images/2.png" alt="贝拉Bella">
                        </div>
                    </div>
                </div>
                <div class="p2ImgWrapper345">
                    <div class="p2_introduce">
                        <div class="p2_intro" style="background-color: #B8A6D9;">
                            珈乐(Carol):乐华娱乐旗下虚拟偶像女团A-SOUL成员，组合Vocal担当。</div>
                        <div class="p2_imgwrapper3 p2_imgwrapper">
                            <div class="p2_inner_text">珈</br>乐</br>A</br>V</br>A</div>
                            <img class="p2_img" src="images/3.png" alt="珈乐Carol">
                        </div>
                    </div>
                    <div class="p2_introduce">
                        <div class="p2_intro" style="background-color: #E799B0;">
                            嘉然(Diana):乐华娱乐旗下虚拟偶像女团A-SOUL成员，组合吃货担当。</div>
                        <div class="p2_imgwrapper4 p2_imgwrapper">
                            <div class="p2_inner_text">嘉</br>然</br>A</br>V</br>A</div>
                            <img class="p2_img" src="images/4.png" alt="嘉然Diana">
                        </div>
                    </div>
                    <div class="p2_introduce">
                        <div class="p2_intro" style="background-color: #576690;">
                            乃琳(Eileen):乐华娱乐旗下虚拟偶像女团A-SOUL成员，组合MC担当。</div>
                        <div class="p2_imgwrapper5 p2_imgwrapper">
                            <div class="p2_inner_text">乃</br>琳</br>A</br>V</br>A</div>
                            <img class="p2_img" src="images/5.png" alt="乃琳Eileen">
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="intropage"></div>!-->
        </div>
    </section>
    <!--part3-->
    <section class="ftco-section  part3" id="section-pricing" style="background-color:#1d1d1d;">
        <div id="pt3">
            <div class="part3Top"></div>
            <div class="p3_container">
                <div class="p3_padding col-md-1">
                    <div class="">
                    </div>
                </div>
                <div class="p3_imgwrapper1 p3_imgwrapper col-md-2">
                    <div class="imgBox">
                        <div class="p3_inner_text_wrapper">
                            <p class="p3_inner_text" style="font-family:MyFontName;">视</p>
                            <p class="p3_inner_text" style="font-family:MyFontName;">频</p>
                        </div>
                        <!-- <img class="p3_img1" src="./images/1.png" /> -->
                        <div class="p3_img p3_img_1"></div>
                    </div>
                    <div style="filter: blur(5px);"></div>
                </div>
                <div class="p3_imgwrapper2 p3_imgwrapper col-md-2">
                    <div class="imgBox">
                        <div class="p3_inner_text_wrapper">
                            <p class="p3_inner_text">文</p>
                            <p class="p3_inner_text">章</p>
                        </div>
                        <!-- <img class="p3_img2" src="./images/2.png" /> -->
                        <div class="p3_img p3_img_2"></div>
                    </div>
                </div>
                <div class="p3_imgwrapper3 p3_imgwrapper col-md-2">
                    <div class="imgBox">
                        <div class="p3_inner_text_wrapper">
                            <div class="p3_inner_text p3MidText">详</div>
                            <div class="p3_inner_text p3MidText">细</div>
                            <div class="p3_inner_text p3MidText">了</div>
                            <div class="p3_inner_text p3MidText">解</div>
                        </div>
                        <!-- <img class="p3_img3" src="./images/3.png" /> -->
                        <div class="p3_img p3_img_3"></div>
                    </div>
                </div>
                <div class="p3_imgwrapper4 p3_imgwrapper col-md-2">
                    <div class="imgBox">
                        <div class="p3_inner_text_wrapper">
                            <div class="p3_inner_text">音</div>
                            <div class="p3_inner_text">乐</div>
                        </div>
                        <!-- <img class="p3_img4" src="./images/4.png" /> -->
                        <div class="p3_img p3_img_4"></div>
                    </div>
                </div>
                <div class="p3_imgwrapper5 p3_imgwrapper col-md-2">
                    <div class="imgBox">
                        <div class="p3_inner_text_wrapper">
                            <div class="p3_inner_text">其</div>
                            <div class="p3_inner_text">他</div>
                        </div>
                        <!-- <img class="p3_img5" src="./images/5.png" /> -->
                        <div class="p3_img p3_img_5"></div>
                    </div>
                </div>
                <div class="p3_padding col-md-1	">
                    <div class="">
                    </div>
                </div>
            </div>
            <!-- <div class="part3Bottom"></div> -->
            <!--<div class="intropage"></div>!-->
        </div>
    </section>
    <section class="ftco-section part4" id="section-about" style="background-color:rgb(40, 40, 40)">
        <div id="p4_developer_list">
            <h2 class="title">开发者名单</h2>
            <!-- Get developer name list by js and insert multiple elements -->
            <!-- like `<span>developer_name</span>` in `p#p4_developer_names` -->
            <p class="col-md-8 col-sm-12" id="p4_developer_names"></p>
        </div>
        <div class="p4_bar_wrapper">
            <img class="p4_asoul_bar" src="./images/part4_asoul_bar.png">
        </div>
        <div class="p4_asoul_bar_vert"></div>
    </section>
    <footer class="ftco-footer" id="section-counter" style="background-color:rgb(29, 29, 29)">
        <div class="container">
            <div class="row">
                <div class="col-md text-left">
                    <h5 id="footer_h5" class="mt-0">&copy; ProJect A-SoulFAN All Rights Reserved</h5>
                </div>
            </div>
        </div>
    </footer>

    <!-- loader -->
    <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
            <circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
            <circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
                stroke="#4586ff" />
        </svg></div>


    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.animateNumber.min.js"></script>
    <script src="js/main.js"></script>

</body>

</html>
